// Lost Grid v5.1.4 - https://github.com/corysimmons/lost

$gutter: 30px !default;
$rtl: false !default;
$flexbox: false !default;


/// Sets a translucent background color to all elements it affects. Helpful while setting up, or debugging, the structure of your site to make sure all items are cleared correctly.
///
/// @param {color} $bg [blue] - A color to be lightened, so make sure you pick a darkish color.
///
/// @example
///   section {
///     @include edit(red);
///   }

@mixin edit($bg: blue) {
  * {
    background: rgba($bg, 0.1);
  }
}


/// Clearfix used to clear floated children elements. http://nicolasgallagher.com/micro-clearfix-hack
///
/// @example
///   .parent {
///     @include clearfix;
///     .child {
///       @include column('1/2');
///     }
///   }

@mixin clearfix() {
  *zoom: 1;
  &:before, &:after {
    content: '';
    display: table;
  }
  &:after {
    clear: both;
  }
}


/// Creates a Flexbox container.
///
/// @param {string} $direction [row] - The flex-direction the container should create. This is typically opposite to the element you're creating so a row() would need flex-container(column).
///
/// @example
///   $flexbox: true;
///
///   section {
///     @include flex-container;
///     figure {
///       @include column('1/2');
///     }
///   }

@mixin flex-container($direction: row) {
  display: flex;
  @if ($direction == row) {
    flex-flow: row wrap;
  }
  @if ($direction == column) {
    flex-flow: column nowrap;
  }
}


/// Horizontally center a container element and apply padding to it.
///
/// @param {unit} $max-size [1140px] - A max-width to assign. Can be any unit.
/// @param {unit} $pad [0] - Padding on the left and right of the element. Can be any unit.
/// @param {boolean} $flex [$flexbox] - Determines whether this element should use Flexbox or not.
///
/// @example
///   section {
///     @include center(900px);
///   }

@mixin center($max-size: 1140px, $pad: 0, $flex: $flexbox) {
  @if ($flex == false) {
    @include clearfix;
  } @else {
    @include flex-container;
  }
  @if ($pad != 0) {
    padding-left: $pad;
    padding-right: $pad;
  }
  max-width: $max-size;
  margin-left: auto;
  margin-right: auto;
}


/// Align nested elements.
///
/// @param {string} $location [middle-center] - The position the nested element takes relative to the containing element.
/// @param {boolean} $flex [$flexbox] - Determines whether this element should use Flexbox or not.
///
/// - reset
/// - top-left
/// - top-center or top
/// - top-right
/// - middle-left or left
/// - middle-right or right
/// - bottom-left
/// - bottom-center or bottom
/// - bottom-right
///
/// @example
///   .parent {
///     @include align(right);
///     width: 600px;
///     height: 400px;
///     .child {
///       width: 300px;
///       height: 150px;
///     }
///   }

@mixin align($location: middle-center, $flex: $flexbox) {
  @if ($flex == false) {
    position: relative;
    > * {
      position: absolute;
      @if ($location == reset) {
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
        transform: translate3d(0, 0, 0);
      } @else if ($location == top-left) {
        top: 0;
        right: auto;
        bottom: auto;
        left: 0;
        transform: translate3d(0, 0, 0);
      } @else if ($location == top-center) or ($location == top) {
        top: 0;
        right: auto;
        bottom: auto;
        left: 50%;
        transform: translate3d(-50%, 0, 0);
      } @else if ($location == top-right) {
        top: 0;
        right: 0;
        bottom: auto;
        left: auto;
        transform: translate3d(0, 0, 0);
      } @else if ($location == middle-left) or ($location == left) {
        top: 50%;
        right: auto;
        bottom: auto;
        left: 0;
        transform: translate3d(0, -50%, 0);
      } @else if ($location == middle-right) or ($location == right) {
        top: 50%;
        right: 0;
        bottom: auto;
        left: auto;
        transform: translate3d(0, -50%, 0);
      } @else if ($location == bottom-left) {
        top: auto;
        right: auto;
        bottom: 0;
        left: 0;
        transform: translate3d(0, 0, 0);
      } @else if ($location == bottom-center) or ($location == bottom) {
        top: auto;
        right: auto;
        bottom: 0;
        left: 50%;
        transform: translate3d(-50%, 0, 0);
      } @else if ($location == bottom-right) {
        top: auto;
        right: 0;
        bottom: 0;
        left: auto;
        transform: translate3d(0, 0, 0);
      } @else {
        top: 50%;
        right: auto;
        bottom: auto;
        left: 50%;
        transform: translate3d(-50%, -50%, 0);
      }
    }
  } @else {
    display: flex;
    @if ($location == reset) {
      justify-content: inherit;
      align-items: inherit;
    } @else if ($location == top-left) {
      justify-content: flex-start;
      align-items: flex-start;
    } @else if ($location == top-center) or ($location == top) {
      justify-content: center;
      align-items: flex-start;
    } @else if ($location == top-right) {
      justify-content: flex-end;
      align-items: flex-start;
    } @else if ($location == middle-left) or ($location == left) {
      justify-content: flex-start;
      align-items: center;
    } @else if ($location == middle-right) or ($location == right) {
      justify-content: flex-end;
      align-items: center;
    } @else if ($location == bottom-left) {
      justify-content: flex-start;
      align-items: flex-end;
    } @else if ($location == bottom-center) or ($location == bottom) {
      justify-content: center;
      align-items: flex-end;
    } @else if ($location == bottom-right) {
      justify-content: flex-end;
      align-items: flex-end;
    } @else {
      justify-content: center;
      align-items: center;
    }
  }
}


/// Sass can't split strings natively. Thanks to @HugoGiraudel for https://github.com/at-import/SassyLists
///
/// @access private

@function sl-explode($string, $delimiter: '', $separator: "space") {
  @if type-of($string) != "string" {
    @warn "`sl-explode` function expecting a string; #{type-of($string)} given.";
    @return null;
  }
  @if type-of($delimiter) != "string" {
    @warn "`sl-explode` function expecting a string; #{type-of($delimiter)} given.";
    @return null;
  }
  $result: ();
  $length: str-length($string);
  @if not index("space" "comma", $separator) {
    $separator: "space";
  }
  @if str-length($delimiter) == 0 {
    @for $i from 1 through $length {
      $result: append($result, str-slice($string, $i, $i));
    }
    @return $result;
  }
  $running: true;
  $remaining: $string;
  @while $running {
    $index: str-index($remaining, $delimiter);
    @if not $index {
      $running: false;
    }
    @else {
      $slice: str-slice($remaining, 1, $index - 1);
      $result: append($result, $slice, $separator);
      $remaining: str-slice($remaining, $index + str-length($delimiter));
    }
  }
  @return append($result, $remaining, $separator);
}


/// Creates a column that is a fraction of the size of it's containing element with a gutter. You don't need to pass any additional ratios (fractions) as the grid system will make use of calc(). Note that fractions must always be wrapped in quotes.
///
/// @param {string} $fraction ['1/1'] - This is a simple fraction of the containing element's width. This must be a string written as a fraction.
/// @param {number} $cycle [nth(sl-explode($fraction, '/'), 2)] - Lost works by assigning a margin-right to all elements except the last in the row. It does this by default by using the denominator of the fraction you pick. To override this default use this param. e.g. column('2/4', $cycle: 2)
/// @param {number} $gut [$gutter] - The margin on the right side of the element used to create a gutter. Typically this is left alone and the global $gutter will be used, but you can override it here if you want certain elements to have a particularly large or small gutter (pass 0 for no gutter at all).
/// @param {boolean} $flex [$flexbox] - Determines whether this element should use Flexbox or not.
///
/// @example
///   figure {
///     @include column('1/3');
///   }

@mixin column($fraction: '1/1', $cycle: nth(sl-explode($fraction, '/'), 2), $gut: $gutter, $flex: $flexbox) {
  @if ($gut == 0) {
    width: calc(99.999999% * #{$fraction});
  } @else {
    width: calc(99.99% * #{$fraction} - (#{$gut} - #{$gut} * #{$fraction}));
  }
  @if ($flex == false) {
    @if $rtl {
      &:nth-child(n) {
        margin-left: $gut;
        float: right;
        clear: none;
      }
      &:last-child {
        margin-left: 0;
      }
      &:nth-child(#{$cycle}n) {
        margin-left: 0;
        float: left;
      }
      &:nth-child(#{$cycle}n + 1) {
        clear: right;
      }
    } @else {
      &:nth-child(n) {
        margin-right: $gut;
        float: left;
        clear: none;
      }
      &:last-child {
        margin-right: 0;
      }
      &:nth-child(#{$cycle}n) {
        margin-right: 0;
        float: right;
      }
      &:nth-child(#{$cycle}n + 1) {
        clear: left;
      }
    }
  } @else {
    flex: 0 0 auto;
    @if $rtl {
      &:nth-child(n) {
        margin-left: $gut;
      }
      &:last-child {
        margin-left: 0;
      }
      &:nth-child(#{$cycle}n) {
        margin-left: 0;
      }
    } @else {
      &:nth-child(n) {
        margin-right: $gut;
      }
      &:last-child {
        margin-right: 0;
      }
      &:nth-child(#{$cycle}n) {
        margin-right: 0;
      }
    }
  }
}


/// Creates a row that is a fraction of the size of it's containing element with a gutter. You don't need to pass any additional ratios (fractions) as the grid system will make use of calc(). Note that fractions must always be wrapped in quotes.
///
/// @param {string} $fraction ['1/1'] - This is a simple fraction of the containing element's height. This must be a string written as a fraction.
/// @param {number} $gut [$gutter] - The margin on the bottom of the element used to create a gutter. Typically this is left alone and the global $gutter will be used, but you can override it here if you want certain elements to have a particularly large or small gutter (pass 0 for no gutter at all).
/// @param {boolean} $flex [$flexbox] - Determines whether this element should use Flexbox or not.
///
/// @example
///   figure {
///     @include row('1/3');
///   }

@mixin row($fraction: '1/1', $gut: $gutter, $flex: $flexbox) {
  width: 100%;
  @if ($gut == 0) {
    height: calc(99.999999% * #{$fraction});
  } @else {
    height: calc(99.99% * #{$fraction} - (#{$gut} - #{$gut} * #{$fraction}));
  }
  margin-bottom: $gut;
  @if ($flex == true) {
    flex: 0 0 auto;
  }
  &:last-child {
    margin-bottom: 0;
  }
}


/// Creates a block that is a fraction of the size of it's containing element with a gutter on the right and bottom. You don't need to pass any additional ratios (fractions) as the grid system will make use of calc(). Note that fractions must always be wrapped in quotes.
///
/// @param {string} $fraction ['1/1'] - This is a simple fraction of the containing element's width/height. This must be a string written as a fraction.
/// @param {number} $cycle [nth(sl-explode($fraction, '/'), 2)] - Lost works by assigning a margin-right/bottom to all elements except the last row (no margin-bottom) and the last column (no margin-right). It does this by default by using the denominator of the fraction you pick. To override this default use this param. e.g. waffle('2/4', $cycle: 2)
/// @param {number} $gut [$gutter] - The margin on the right and bottom side of the element used to create a gutter. Typically this is left alone and the global $gutter will be used, but you can override it here if you want certain elements to have a particularly large or small gutter (pass 0 for no gutter at all).
/// @param {boolean} $flex [$flexbox] - Determines whether this element should use Flexbox or not.
///
/// @example
///   figure {
///     @include waffle('1/3');
///   }

@mixin waffle($fraction: '1/1', $cycle: nth(sl-explode($fraction, '/'), 2), $gut: $gutter, $flex: $flexbox) {
  @if ($gut == 0) {
    width: calc(99.999999% * #{$fraction});
    height: calc(99.999999% * #{$fraction});
  } @else {
    width: calc(99.99% * #{$fraction} - (#{$gut} - #{$gut} * #{$fraction}));
    height: calc(99.99% * #{$fraction} - (#{$gut} - #{$gut} * #{$fraction}));
  }
  @if ($flex == false) {
    @if $rtl {
      &:nth-child(n) {
        float: right;
        margin-left: $gut;
        clear: none;
      }
      &:nth-child(#{$cycle}n), &:last-child {
        margin-left: 0;
      }
      &:nth-child(#{$cycle}n + 1) {
        clear: right;
      }
    } @else {
      &:nth-child(n) {
        float: left;
        margin-right: $gut;
        clear: none;
      }
      &:nth-child(#{$cycle}n), &:last-child {
        margin-right: 0;
      }
      &:nth-child(#{$cycle}n + 1) {
        clear: left;
      }
    }
  } @else {
    flex: 0 0 auto;
    @if ($rtl) {
      &:nth-child(n) {
        margin-left: $gut;
      }
      &:nth-child(#{$cycle}n), &:last-child {
        margin-left: 0;
      }
    } @else {
      &:nth-child(n) {
        margin-right: $gut;
      }
      &:nth-child(#{$cycle}n), &:last-child {
        margin-right: 0;
      }
    }
  }
  &:nth-child(n) {
    margin-bottom: $gut;
  }
  &:last-child {
    margin-bottom: 0;
  }
  &:nth-last-child(-n + #{$cycle}) {
    margin-bottom: 0;
  }
}


/// Sass can't figure out what a number is. Thanks to @HugoGiraudel for http://hugogiraudel.com/2014/01/15/sass-string-to-number
///
/// @access private

@function _length($number, $unit) {
  $strings: 'px' 'cm' 'mm' '%' 'ch' 'pica' 'in' 'em' 'rem' 'pt' 'pc' 'ex' 'vw' 'vh' 'vmin' 'vmax';
  $units:   1px  1cm  1mm  1%  1ch  1pica  1in  1em  1rem  1pt  1pc  1ex  1vw  1vh  1vmin  1vmax;
  $index: index($strings, $unit);
  @if not $index {
    @warn "Unknown unit `#{$unit}`.";
    @return false;
  }
  @return $number * nth($units, $index);
}


/// @access private

@function number($string) {
  $strings: '0' '1' '2' '3' '4' '5' '6' '7' '8' '9';
  $numbers:  0   1   2   3   4   5   6   7   8   9;
  $result: 0;
  $divider: 0;
  $minus: false;
  @for $i from 1 through str-length($string) {
    $character: str-slice($string, $i, $i);
    $index: index($strings, $character);
    @if $character == '-' {
      $minus: true;
    }
    @else if $character == '.' {
      $divider: 1;
    }
    @else {
      @if not $index {
        $result: if($minus, $result * -1, $result);
        @return _length($result, str-slice($string, $i));
      }
      $number: nth($numbers, $index);
      @if $divider == 0 {
        $result: $result * 10;
      }
      @else {
        $divider: $divider * 10;
        $number: $number / $divider;
      }
      $result: $result + $number;
    }
  }
  @return if($minus, $result * -1, $result);
}


/// Margin to the left, right, bottom, or top, of an element depending on if the fraction passed is positive or negative. It works for both horizontal and vertical grids but not both.
///
/// @param {string} $fraction ['1/1'] - Fraction of the container to be offset. Must be a string.
/// @param {string} $dir [row] - Direction the grid is going. Should be the opposite of the column() or row() it's being used on.
/// @param {number} $gut [$gutter] - How large the gutter involved is, typically this won't be adjusted, but if you have set the elements for that container to have different gutters than default, you will need to match that gutter here as well.
///
/// @example
///   .two-elements {
///     @include column('1/3');
///     &:first-child {
///       @include offset('1/3');
///     }
///   }

@mixin offset($fraction: '1/1', $dir: row, $gut: $gutter) {
  $numerator: number(nth(sl-explode($fraction, '/'), 1));
  @if ($dir == row) {
    @if ($numerator > 0) {
      @if ($gut == 0) {
        margin-right: calc(99.999999% * #{$fraction}) !important;
      } @else {
        margin-right: calc(99.99% * #{$fraction} - (#{$gut} - #{$gut} * #{$fraction}) + (#{$gut} * 2)) !important;
      }
    } @else if ($numerator < 0) {
      @if ($gut == 0) {
        margin-left: calc(99.999999% * (#{$fraction} * -1)) !important;
      } @else {
        margin-left: calc(99.99% * (#{$fraction} * -1) - (#{$gut} - #{$gut} * (#{$fraction} * -1)) + #{$gut}) !important;
      }
    } @else {
      margin-left: 0 !important;
      margin-right: $gut !important;
    }
  } @else {
    @if ($numerator > 0) {
      @if ($gut == 0) {
        margin-bottom: calc(99.999999% * #{$fraction}) !important;
      } @else {
        margin-bottom: calc(99.99% * #{$fraction} - (#{$gut} - #{$gut} * #{$fraction}) + (#{$gut} * 2)) !important;
      }
    } @else if ($numerator < 0) {
      @if ($gut == 0) {
        margin-top: calc(99.999999% * (#{$fraction} * -1)) !important;
      } @else {
        margin-top: calc(99.99% * (#{$fraction} * -1) - (#{$gut} - #{$gut} * (#{$fraction} * -1)) + (#{$gut} * 2)) !important;
      }
    } @else {
      margin-top: 0 !important;
      margin-bottom: $gut !important;
    }
  }
}


/// Source ordering. Shift elements left, right, up, or down, by their left or top position by passing a positive or negative fraction.
///
/// @param {string} $fraction ['1/1'] - Fraction of the container to be shifted. Must be a string.
/// @param {string} $dir [row] - Direction the grid is going. Should be the opposite of the column() or row() it's being used on.
/// @param {number} $gut [$gutter] - Adjust the size of the gutter for this movement. Should match the element's $gut.
///
/// @example
///   figure {
///     @include column('1/2');
///     &:first-child {
///       @include move('1/2');
///     }
///     &:last-child {
///       @include move('-1/2');
///     }
///   }

@mixin move($fraction: '1/1', $dir: row, $gut: $gutter) {
  position: relative;
  @if ($dir == row) {
    @if ($gut == 0) {
      left: calc(99.999999% * #{$fraction});
    } @else {
      left: calc(99.99% * #{$fraction} - (#{$gut} - #{$gut} * #{$fraction}) + #{$gut});
    }
  } @else {
    @if ($gut == 0) {
      top: calc(99.999999% * #{$fraction});
    } @else {
      top: calc(99.99% * #{$fraction} - (#{$gut} - #{$gut} * #{$fraction}) + #{$gut});
    }
  }
}


/// Creates a row element for working with JS masonry libraries like Isotope. Assigns a negative margin on each side of this wrapping element.
///
/// @param {number} $gut [$gutter] - How large the gutter involved is, typically this won't be adjusted and will inherit the global $gutter setting, but it's made available if you want your masonry grid to have a special $gut, it should match your masonry-column's $gut.
/// @param {boolean} $flex [$flexbox] - Determines whether this element should use Flexbox or not.
///
/// @example
///   section {
///     @include masonry-wrap;
///   }
///   figure {
///     @include masonry-column('1/3');
///   }

@mixin masonry-wrap($gut: $gutter, $flex: $flexbox) {
  @if ($flex == false) {
    @include clearfix;
  } @else {
    @include flex-container;
  }
  margin-left: -($gut / 2);
  margin-right: -($gut / 2);
}


/// Creates a column for working with JS masonry libraries like Isotope. Assigns a margin to each side of the element.
///
/// @param {number} $gut [$gutter] - How large the gutter involved is, typically this won't be adjusted and will inherit the global $gutter setting, but it's made available if you want your masonry grid to have a special $gut, it should match your masonry-row's $gut.
/// @param {boolean} $flex [$flexbox] - Determines whether this element should use Flexbox or not.
///
/// @example
///   section {
///     @include masonry-wrap;
///   }
///   figure {
///     @include masonry-column('1/3');
///   }

@mixin masonry-column($fraction: '1/1', $gut: $gutter, $flex: $flexbox) {
  @if ($flex == true) {
    flex: 0 0 auto;
  }
  @if ($gut == 0) {
    width: calc(99.999999% * #{$fraction});
  } @else {
    width: calc(99.99% * #{$fraction} - #{$gut});
  }
  margin-left: ($gut / 2);
  margin-right: ($gut / 2);
}


/// A function to return the size of a column minus it's gutter if a gutter is assigned. Handy for generating CSS classes.
///
/// @param {string} $fraction ['1/1'] - This is a simple fraction of the containing element's width. This must be a string written as a fraction.
/// @param {number} $gut [$gutter] - The gutter assigned to this size.
///
/// @example
///   [class*="col-"] {
///     float: left;
///     margin-right: $gutter;
///     &:last-child {
///       margin-right: 0;
///     }
///   }
///
///   @for $i from 1 through 12 {
///     .col-#{$i} {
///       width: get-size('#{$i}/12');
///     }
///   }

@function get-size($fraction: '1/1', $gut: $gutter) {
  @if ($gut == 0) {
    @return calc(99.999999% * #{$fraction});
  } @else {
    @return calc(99.99% * #{$fraction} - (#{$gut} - #{$gut} * #{$fraction}));
  }
}
